import React, { Component } from 'react'
import { bindActionCreators } from "redux";
import { connect } from 'react-redux'
import { getUser, actions } from "../../store/modules/login"
import img from "../../assets/img/logo1.png"
import "./Login.css"
class Login extends Component {
  render() {
    let { user, userActions: { changeUser, reqLogin }, } = this.props;
    return (
      <div id="login">
        <div className="top1">
          <i className="iconfont">&#xe6bc;</i>
          <h2>手机登录</h2>
        </div>
        <div className="center1">
          <img src={img} alt="" />
          <div>
            <div>
              <input type="text" value={user.phone} onChange={(e) => changeUser(e.target.value, "phone")} placeholder="手机号" className="yzm"/>
            </div>
            <div>
              <input type="text" onChange={(e) => changeUser(e.target.value, "password")} value={user.password} placeholder="密码"  className="yzm"/>
            </div>
            <button onClick={() => reqLogin(this.props.history)} className="in1">登录</button>
          </div>
        </div>

      </div>
    )
  }
}

let mapStateToProps = state => {
  return {
    user: getUser(state)
  }
}
let mapDispatchToProps = dispatch => {
  return {
    userActions: bindActionCreators(actions, dispatch),
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Login)
